<template>
	<!-- 登录界面 -->
	<view class="container">
		<view class="login">
			<view class="login-box">
				<view class="title1">欢迎来到</view>
				<image src="@/static/images/login/title2.png" class="title2" />
			</view>
			<view class="login-form">
				<uv-form ref="formSubmit" :model="formData">
					<!-- 账号 -->
					<view class="item-section">
						<image class="usernameImg" src="@/static/images/login/username.png" />
						<view>
							<input class="input u-border-bottom" v-model="formData.userName" placeholder="账号"
								placeholder-style="color: rgba(255, 255, 255,0.5)" />
							<!-- 
								<uv-input class="input" name="userName" v-model="formData.userName" placeholder="账号"
								placeholder-style="color: rgba(255, 255, 255,0.5)" /> -->
						</view>
					</view>
					<!-- 密码 -->
					<view class="item-section">
						<img class="codeImg" src="@/static/images/login/code.png" />
						<input class="input uni-input" placeholder="请输入密码" :password="show" v-model="formData.password"
							placeholder-style="color: rgba(255, 255, 255,0.5)" />
						<button plain="true" @click="showPwd" class="codeBtn" style="border: transparent;">
							<uv-icon :name="show ? 'eye-off' : 'eye' " color="rgba(255, 255, 255,0.5)" size="26" />
						</button>
						<!-- <text class="uni-icon" :class="[!show ? 'uni-eye-active' : '']" @click="showPwd">&#xe568;</text> -->
						<!-- 	<img class="codeImg" src="@/static/images/login/code.png" />
						<button plain="true" @click="showPwd" class="codeBtn" style="border: transparent;">
							<uv-icon :name="show ? 'eye-off' : 'eye' " color="rgba(255, 255, 255,0.5)" size="26" />
						</button>
						<view>
							<uv-input class="input" name="password" v-model="formData.password" :password="show"
								placeholder="密码" placeholder-style="color: rgba(255, 255, 255,0.5)" />
						</view> -->
					</view>

					<view class="item-section">
						<image class="verificationImg" src="@/static/images/login/verification-code.png" />
						<image class="Img" :src="imageSrc" @click="getCode" />
						<view>
							<!-- 	<uv-input class="input code" name="captcha" v-model="formData.captcha" placeholder="验证码"
								placeholder-style="color: rgba(255, 255, 255,0.5)" /> -->

							<input class="input code" placeholder="验证码" v-model="formData.captcha"
								placeholder-style="color: rgba(255, 255, 255,0.5)" />

						</view>
					</view>

					<view class="remember-password">
						<!-- 		<uv-checkbox-group @change="onChange">
							<uv-checkbox name="1" checked />
							<label class="password-label" for="check">记住密码</label>
						</uv-checkbox-group> -->
					</view>
					<button class="btn" size="default" form-type="submit"
						style="width: 565rpx;height: 96rpx;border-radius: 64rpx;" @click="formSubmit">登录</button>
					<button class="cancelBtn" size="default" bind:tap="cancelLogin"
						style="width: 565rpx;height: 96rpx;border-radius: 64rpx;">退出登录</button>
					<view class="mark">注：仅限企业内部人员使用</view>
				</uv-form>
			</view>
		</view>
		<image class="top-nav-bg" src="https://gems-pros.com/s_images/login-img.png" />

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getCaptcha,
		login,
		userInfo
	} from "@/api/login.js"

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		menuAds
	} from '@/api/market'
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt";
	import cookie from '@/utils/cookie'
	import fetch from "@/utils/fetch"

	const formData = reactive({
		userName: 'admin',
		password: '@Green@2024',
		checked: '1'
	})
	const imageSrc = ref(null) //验证码路径
	const verifaicationId = ref('') //验证码ID
	const show = ref(true)
	const getCode = async () => {
		let res = await getCaptcha()
		imageSrc.value = res.data.data.imgBase64Str
		verifaicationId.value = res.data.data.id

	}
	//存储用户信息
	const strogeUserInfo = async () => {
		let {
			data
		} = await userInfo()
		cookie.set("zh-h5-userInfo", data.data)
		// console.log("用户信息", data)
	}
	/**
	 * 点击密码,明文密文
	 */
	const showPwd = (e) => {
		if (!show.value) {
			show.value = true
		} else {
			show.value = false
		}
	}
	const formSubmit = async () => {
		try {
			// 1. 准备请求参数
			const params = {
				userName: formData.userName,
				password: encrypt(formData.password),
				captcha: formData.captcha,
				id: verifaicationId.value
			};

			// 2. 登录请求
			const res = await login(params);

			if (!res?.data?.success) {
				throw new Error(res?.message || '登录失败,请检查填写的信息！');
			}

			// 3. 存储token
			cookie.set('zh-h5-project-token', res.data.data.token);

			// 4. 获取并存储用户信息
			const userInfoRes = await userInfo();
			if (userInfoRes?.data?.data) {
				cookie.set("zh-h5-userInfo", userInfoRes.data.data);
			}

			// 5. 导航到首页
			uni.navigateTo({
				url: '/pages/nav/nav'
			});

		} catch (error) {
			console.error('登录失败:', error);
			uni.showToast({
				title: error.message || '登录失败，请重试',
				icon: 'none'
			});
		}
	}
	onLoad(() => {
		getCode()
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background: linear-gradient(180deg, #0052B8 0%, #0E82C5 100%);

		.top-nav-bg {
			width: 750rpx;
			height: 144rpx;
			position: absolute;
			top: 0;
		}

		.login {
			width: 100%;
			height: 100%;

			.login-box {
				padding-top: 190rpx;
				padding-left: 60rpx;
				width: 560rpx;

				.title1 {
					// margin-top: 240rpx;
					font-size: 42rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}

				.title2 {
					width: 572rpx;
					height: 52rpx;
					margin-top: 30rpx;
					// margin-top: 330rpx;
				}
			}

			.login-form {
				// width: 85%;
				margin-top: 80rpx;
				padding-left: 60rpx;
				padding-right: 60rpx;

				.item-section {
					position: relative;
					// height: 160rpx;
					margin-top: 100rpx;
					height: 7%;

					/* 输入框 */
					/* code输入框 */
					.usernameImg {
						position: absolute;
						/* 用户名位置 */
						top: 0rpx;
						left: 22rpx;
						width: 36rpx;
						height: 36rpx;
					}

					.codeImg {
						position: absolute;
						/* 密码位置 */
						top: 0rpx;
						left: 22rpx;
						width: 36rpx;
						height: 36rpx;
					}

					.codeBtn {
						/* 密码显示隐藏位置 */
						position: absolute;
						top: -46rpx;
						right: 20rpx;
						z-index: 9;
						background-color: transparent;
						/* 设置点击在图标上 */
						padding-top: 30rpx;
					}

					.Img {
						position: absolute;
						/* 验证码图片位置 */
						top: -46rpx;
						right: 20rpx;
						width: 168rpx;
						height: 76rpx;
						/* border: 1px solid #000; */
					}

					.verificationImg {
						position: absolute;
						/* 验证码位置 */
						top: 0rpx;
						left: 22rpx;
						width: 36rpx;
						height: 36rpx;
					}

					.input {
						/* 输入框内容位置 */
						padding-bottom: 10rpx;
						padding-left: 80rpx;
						padding-right: 200rpx;
						font-size: 16px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						height: 50rpx;
						border: none;
						border-bottom: 3px solid #05ddff !important;
						color: #FFF;

						::v-deep {
							.uv-input__content {
								padding-left: 40rpx;
							}

							.uni-input-input {
								color: #fff;
							}
						}

					}

					.code {
						margin-top: -22rpx;
					}
				}

				.remember-password {
					margin: 24rpx 0;
					float: right;

					.password-label {
						color: #FFF;
					}
				}

				.btn {
					margin-top: 100rpx;
					background-color: #0ea4f1;
					color: #FFFFFF;
					line-height: 95rpx;
				}

				.cancelBtn {
					margin-top: 20rpx;
					background-color: #0ea4f1;
					color: #FFFFFF;
					line-height: 95rpx;
				}

				.mark {
					margin-top: 20rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.dialog {
			font-size: 32rpx;
			font-family: SFPro-Semibold, SFPro;

			.title {
				text-align: center;
				margin-top: 20rpx;
				font-weight: 600;
			}

			.ctx {
				margin: 20rpx 0 0 30rpx;
				font-size: 28rpx;
			}

			.ctx2 {
				text-align: left;
				margin: 20rpx 0 0 50rpx;
				font-size: 28rpx;
				color: #444444;
			}

			.input-class {
				position: relative;
				width: 90%;
				margin: 20rpx 0 4rpx 30rpx;
				border-bottom: 2px solid #007cff;
				text-align: left;
			}

			.input-btn {
				.van-button {
					height: 60rpx;
					line-height: 60rpx;
					z-index: 999;
					position: absolute;
					right: 30rpx;
					top: 180rpx;
				}

			}
		}
	}
</style>